<template>
  <div class="markdown-wrapper">
    <textarea ref="editor"/>
  </div>
</template>

<script>
  import Simplemde from 'simplemde'
  import 'simplemde/dist/simplemde.min.css'

  /**
   * Markdown编辑器
   */
  export default {
    naem: 'SimplemdeMarkdownEditor',
    props: {
      /**
       * 初始数据
       */
      value: {
        type: String,
        default: ''
      },
      /**
       * 选项
       */
      options: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        /**
         * 编辑器对象
         */
        editor: null
      }
    },
    methods: {
      /**
       * 设置数据
       */
      setValue(value) {
        this.editor.value (value)
      },
      /**
       * 获取数据
       * @returns {*}
       */
      getValue() {
        return this.editor.value ()
      }
    },
    mounted() {
      this.editor = new Simplemde (Object.assign (this.options, {
        element: this.$refs.editor
      }))
      if (this.value) {
        this.editor.value (this.value)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .markdown-wrapper {
    .editor-toolbar.fullscreen {
      z-index: 9999;
    }

    .CodeMirror-fullscreen {
      z-index: 9999;
    }

    .CodeMirror-fullscreen ~ .editor-preview-side {
      z-index: 9999;
    }
  }
</style>
